<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户信息管理</title>
  <!--    引入 bootstrap的 css-->
  <link type="text/css" rel="stylesheet" th:href="@{plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css}">
  <!--    引入分页插件pagination的css样式文件-->
  <link type="text/css" rel="stylesheet" th:href="@{plugins/pagination-2.1.5/css/pagination.css}">


  <link th:href="@{plugins/Hplus-v.4.1.0/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
  <link th:href="@{plugins/Hplus-v.4.1.0/css/plugins/iCheck/custom.css}" rel="stylesheet">
  <link th:href="@{plugins/Hplus-v.4.1.0/css/animate.css}" rel="stylesheet">
  <link th:href="@{plugins/Hplus-v.4.1.0/css/style.css?v=4.1.0}" rel="stylesheet">


  <!--   引入 jquery 框架，需要第一个引入，因为其他的js会使用该框架-->
  <script type="text/javascript" th:src="@{plugins/jquery-1.12.4/jquery-1.12.4.min.js}"></script>
  <!--    引入 bootstrap的js-->
  <script type="text/javascript" th:src="@{plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js}"></script>

  <!--    引入假分页控件pagination的js-->
  <script type="text/javascript" th:src="@{plugins/pagination-2.1.5/js/pagination.min.js}"></script>

  <script type="text/javascript">
    // 添加分页处理： 逻辑分页，假分页
    // 课下作业：  什么是假分页和真分页（逻辑分页和物理分页），他们的优缺点？ 以及物理分页的查询语句？（Mysql、Oracle分别是？）
    // 假分页使用基于jquery的第三方插件； 真分页后台的查询针对 mybatis 第三方的插件： pagehelper
    // 使用ajax进行查询操作
    function doAjaxQuery() {
      $.ajax({
        type: "POST", // 请求的类型  等价于 form 表单的 method 属性
        url: "doAjaxQuery", // 请求的服务器的url，等价于form表单的 action 属性
        data: $("#queryForm").serialize(),//"userName="+$("#username")+"&userpsw="+$("#userpsw"), // 发送服务器的表单数据  form表单数据
        success: function (data) { // 成功时候的回调函数
          // 进行业务逻辑处理，进行 dom 操作，完成页面的据图更新
          console.log("data:::::")
          console.log(data)
          // 解析ajax回调返回的data对象中的数据，然后将其显示到指定的位置
          if (data) {
            // 将查询的数据源进行假分页处理
            $('#queryPager').pagination({
              dataSource: data,
              pageSize: 5,
              showGoInput: true,
              showGoButton: true,
              callback: function (pageData, pagination) {
                // template method of yourself
                var strMsg = "";
                // 使用each循环遍历，json数组中的每个对象，并将每个对象的属性值取出进行显示
                $.each(pageData, function (index, eachUserBean) {
                  strMsg += " <tr>";
                  strMsg += "<th scope='row'>" + (index + 1) + "</th>";
                  strMsg += "<td>" + eachUserBean.username + "</td>";
                  strMsg += "<td>" + eachUserBean.useraddress + "</td>";
                  strMsg += "<td>" + eachUserBean.usertel + "</td>";
                  strMsg += "<td>" + eachUserBean.userregdate + "</td>";
                  strMsg += "<td><img src='" + eachUserBean.userimg + "' width='30px' height='30px'></td>";

                  strMsg += "</tr>";
                })
                $("#showMsg").html(strMsg); // 局部刷新

              }
            })


          }
        },
        error: function () {
          alert("出现错误");
        }
      });
    }

    ////////////////////////////////////////////////////
    // 显示新增的model模态框
    function showMadel() {
      $('#userInfoMadel').modal('show')
    }

    // 点击模态框的保存按钮
    function saveMe() {
      // 使用jquery的serialize方法并不能处理，包含文件流的表单，这时，需要使用 dom 的 FormData 对象；
      // FormData是dom对象，而不是jquery对象；使用get方法或者 [] 将jquery对象转换为 dom 对象
      // 使用FormData进行文件上传操作，创建一个FormData对象（注意将jquery对象转换为dom对象）
      var formData = new FormData($("#insertform").get(0));
      // jquery实现ajax的操作
      $.ajax({
        type: "POST", // 请求方式
        url: "ajaxAddAndUpdateUserInfo", // 请求的服务器路径
        data: formData, //$("#insertform").serialize(), // post请求的数据参数例如： userId=1&userName=zhangsan

        // 使用FormData对象作为ajax发送服务器的数据载体，需要设置以下两个参数
        contentType: false, // 防止request请求位置文件头上下文对象，如果进行处理，则会丢失文件流对象
        processData: false, // 防止request请求自动处理ForamData对象，如果进行处理，则会丢失文件流对象

        datatype: "Json", // 服务器响应的内容类型
        success: function (data) { // ajax请求成功时的回调函数
          // data 是json对象，而不是json字符串，所有data可以像数据集合一样进行遍历

          // 这里是进行ajax业务逻辑处理的地方
          // 执行ajax引擎的回调处理，这里是用来进行业务逻辑处理的【类似 thread 类的 run 方法； 类似于 servlet的service方法】
          console.log("ajax查询的数据集：")
          console.log(data);
          console.log("djlkfjalksf::::")
          console.log(JSON.stringify(data))
          // 体现了dom的局部更新，也是ajax优势
          // 遍历 data json对象
          if (data && data == 'ok') {
            alert("用户信息保存成功！");
            // 关闭modal，并调用ajax查询，显示刚才修改的数据记录
            $('#userInfoMadel').modal('hide');
            // 查询显示信息
            doAjaxQuery();
          } else {
            alert("用户信息保存失败！")
          }
        },
        error: function () {
          // ajax请求发生非错误时的回调函数
          alert("用户信息保存失败!")
        }
      });
    }
  </script>
</head>
<body>

<div class="ibox-content">
  <form id="queryForm" class="form-horizontal" style="padding-top: 20px;">
    <div class="form-group">
      <label class="col-sm-2 control-label">用户名：</label>
      <div class="col-sm-3">
        <input type="text" id="username" name="username" placeholder="请输入用户名" class="form-control"> <span
              class="help-block m-b-none"></span>
      </div>

      <label class="col-sm-2 control-label">联系电话：</label>
      <div class="col-sm-3">
        <input type="text" id="usertel" name="usertel" placeholder="请输入联系电话" class="form-control"> <span
              class="help-block m-b-none"></span>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">地址：</label>
      <div class="col-sm-3">
        <input type="text" id="useraddress" name="useraddress" placeholder="密码" class="form-control">
      </div>

      <label class="col-sm-2 control-label">注册日期：</label>
      <div class="col-sm-3">
        <div class="col-sm-5">
          <input type="date" id="userregdate" name="userregdate" placeholder="请输入开始日期" class="form-control">
        </div>
        <div class="col-sm-2">
          -
        </div>
        <div class="col-sm-5">
          <input type="date" id="userregdate2" name="userregdate2" placeholder="请输入结束日期" class="form-control">
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-3 col-sm-2">
        <button class="btn btn-sm btn-white" type="button" onclick="doAjaxQuery()">查询</button>
      </div>
      <div class="col-sm-offset-6 col-sm-2">
        <button class="btn btn-sm btn-white" type="button" onclick="showMadel()">新增</button>
      </div>
    </div>

  </form>
</div>

<div>
  <span></span>
  <div class="bs-example" data-example-id="hoverable-table">
    <table class="table table-hover">
      <thead>
      <tr>
        <th>序号</th>
        <th>用户名</th>
        <th>地址</th>
        <th>电话</th>
        <th>注册日期</th>
        <th>头像</th>
      </tr>
      </thead>
      <tbody id="showMsg">

      </tbody>
    </table>
    <div id="queryPager"></div>
  </div><!-- /example -->
</div>

<!--======================新增和修改弹出模态框 modal==============================-->
<div id="userInfoMadel" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document" style="width: 1000px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="gridSystemModalLabel">用户信息管理</h4>
      </div>
      <div class="modal-body">
        <!--                这里放置 modal 的表单 -->

        <div class="ibox-content">
          <form id="insertform" action="addAndUpdateUserInfo" method="post"
                class="form-horizontal" enctype="multipart/form-data">
            <!--                        隐藏表单域：用于存储记录的id值-->
            <input type="hidden" id="userid" name="userid">
            <div class="form-group">
              <label class="col-sm-2 control-label">用户名</label>

              <div class="col-sm-3">
                <input type="text" id="userName_insert" name="username" class="form-control">
                <span class="help-block m-b-none" id="user-name-insert-label"
                      style="color: #ff0000"></span>
              </div>

              <label class="col-sm-2 control-label">住址</label>

              <div class="col-sm-3">
                <input type="text" id="useraddress_insert" name="useraddress" class="form-control">
                <span class="help-block m-b-none" id="user-address-insert-label"
                      style="color: red"></span>
              </div>
            </div>

            <div class="hr-line-dashed"></div>

            <div class="form-group">
              <label class="col-sm-2 control-label">密码</label>
              <div class="col-sm-3">
                <input type="password" id="userPsw" name="userpsw" class="form-control"> <span
                      class="help-block m-b-none">密码由字母、数字、特殊符号组成</span>
                <span class="help-block m-b-none" id="user-psw-label" style="color: red"></span>
              </div>

              <label class="col-sm-2 control-label">确认密码</label>
              <div class="col-sm-3">
                <input type="password" id="userPsw2" name="userpsw2" class="form-control">
                <span class="help-block m-b-none" id="user-psw2-label" style="color: red"></span>
                <span class="help-block m-b-none" id="user-psw3-label" style="color: red"></span>
              </div>
            </div>

            <div class="hr-line-dashed"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label">联系电话</label>

              <div class="col-sm-3">
                <input type="text" id="userTel_insert" name="usertel" class="form-control">
                <span class="help-block m-b-none" id="user-tel-insert-label" style="color: red"></span>
              </div>
              <label class="col-sm-2 control-label">注册日期</label>

              <div class="col-sm-3">
                <input type="date" id="userRegisteDate_insert" name="userregdate" placeholder="选择注册日期"
                       class="form-control">
                <span class="help-block m-b-none" id="user-registerdate-insert-label"
                      style="color: red"></span>
              </div>
            </div>

            <div class="hr-line-dashed"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label">头像</label>
              <div class="col-sm-3">
                <!--    因为文件要使用 MultipartFile 进行映射，所有不要和实体类的属性名，保持一致-->
                <input type="file" id="userimg" name="file_userimg" class="form-control">
                <span class="help-block m-b-none" id="user-img-label" style="color: red"></span>
              </div>
            </div>
          </form>
        </div>


        <!--  这里放置 modal 的表单 end-->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="saveMe()">保存</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</body>
</html>